<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>公司差旅系统</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
	<div class="nav-backstage navbar navbar-fixed-top">
		<div class="container-fluid">
			<div class="nav-logo">
				<a href="#">公司差旅系统</a>
			</div>
			<div class="nav-staff">
				<div class="icon-bell">
					<a href="#"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span><span class="badge" id="MessageNum">42</span></a>
				</div>
				<div class="dropdown" style="float: left;">
					<button class="btn dropdown-toggle nav-dropdownmenu" type="button" id="NavDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="img/staffPic.jpeg" alt="staffPic" width="35px" height="35px">
						<span>Tadokoro Megumi </span>
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" aria-labelledby="NavDropdownMenu">
						<li><a href="#">个人信息</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">登出</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<div class="sidenav">
		<div>
			<span class="glyphicon glyphicon-tasks" style="padding-top: 5px;margin-right: 10px;"></span> 
			<span>管理</span>	
		</div>
		<ul>
			<li>
				<a href="#" id="aMenu1"><span class="glyphicon glyphicon-th-large" aria-hidden="true"> 出差申请表</span><span class="glyphicon glyphicon-menu-left" aria-hidden="true" style="font-size: 12px;display: block;margin: 12px 20px 0 0;float: right;" id="sub1"></span></a>
				<ul id="menu1">
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;待审核申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已通过申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未通过申请表</a></li>
				</ul>
			</li>
			<li>
				<a href="#" id="aMenu2"><span class="glyphicon glyphicon-th" aria-hidden="true"> 报销申请表</span> <span class="glyphicon glyphicon-menu-left" aria-hidden="true" style="font-size: 12px;display: block;margin: 12px 20px 0 0;float: right;" id="sub2"></span></a>
				<ul id="menu2">
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;待审核申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已通过申请表</a></li>
					<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未通过申请表</a></li>
				</ul>
			</li>
			<li>
				<a href="#"><span class="glyphicon glyphicon-th-list" aria-hidden="true"> 个人出差报表</a>
			</li>
		</ul>
		<div id="copy">
			&copy; Travel Business System by CQU
		</div>
	</div>

	<div class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<h1>待审核出差申请表</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
						<li><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"> 管理向导</a></li>
						<li><a href="#">待审核出差申请表</a></li>
					</ol>
				</div>
			</div>
			
		</div><!--第一个 container-fluid-->

		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<table class="table table-bordered">
						<tr>
							<th>工单号</th>
							<th>姓名</th>
							<th>部门</th>
							<th>申请表类型</th>
							<th>预算费用/元</th>
							<th>状态</th>
							<th>查看申请表详细信息</th>
						</tr>
						<tr>
							<td>U123456789</td>
							<td>史崇辰</td>
							<td>骚话部门</td>
							<td>员工自定义</td>
							<td>20000.0</td>
							<td>待审核</td>
							<td><button class="btn btn-primary" name="detail">单击查看详细信息</button></td>
						</tr>

					</table>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function(){

			$("#menu1").hide();

			$("#menu2").hide();

			var cnt1 = 0;
			$("#aMenu1").click(function(){
				cnt1++;
				if(cnt1 % 2 == 0)
				{
					$(this).css("background-color","#3d3d3d");
					$("#sub1").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-left");
				}
				else
				{
					$(this).css("background-color","#303030");
					$("#sub1").removeClass("glyphicon-menu-left").addClass("glyphicon-menu-down");
				}
				$("#menu1").slideToggle();
			});

			var cnt2 = 0;
			$("#aMenu2").click(function(){
				cnt2++;
				if(cnt2 % 2 == 0)
				{
					$(this).css("background-color","#3d3d3d");
					$("#sub2").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-left");
				}
				else
				{
					$(this).css("background-color","#303030");
					$("#sub2").removeClass("glyphicon-menu-left").addClass("glyphicon-menu-down");
				}
				$("#menu2").slideToggle();
			});
		});
	</script>
</body>
</html>